<template>
  <div class="addContainer">
    <div
      style="
        height: 100%;
        padding-left: 150px;
        padding-right: 150px;
        overflow-y: auto;
        padding-bottom: 70px;
      "
    >
      <div style="padding: 20px">
        <el-card>
          <template #header>
            <span style="font-weight: bold; font-size: 16px">编辑物料</span>
          </template>
          <div class="addBody">
            <div class="basicInfoContainer">
              <div class="milestone">
                <div class="milestone-content">基础信息</div>
              </div>
              <el-form
                style="margin-top: 40px"
                label-width="120"
                ref="editFormRef"
                :model="editForm"
                :rules="rules"
              >
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="物料编号" prop="materialId">
                      <el-input
                        placeholder="请输入"
                        style="width: 300px"
                        v-model.trim="editForm.materialId"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="物料名称" prop="materialName">
                      <el-input
                        placeholder="请输入"
                        style="width: 300px"
                        v-model.trim="editForm.materialName"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="规格型号" prop="type">
                      <el-input
                        placeholder="请输入"
                        style="width: 300px"
                        v-model.trim="editForm.type"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="单位" prop="unit">
                      <el-select
                        v-model="editForm.unit"
                        placeholder="请选择单位"
                        style="width: 300px"
                      >
                        <el-option
                          v-for="item in unitData"
                          :key="item"
                          :label="item"
                          :value="item"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="物料类型" prop="materialType">
                      <el-select
                        v-model="editForm.materialType"
                        placeholder="请选择物料类型"
                        style="width: 300px"
                      >
                        <el-option
                          v-for="item in materialTypeData"
                          :key="item"
                          :label="item"
                          :value="item"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="物料属性" prop="materialProp">
                      <el-select
                        v-model="editForm.materialProp"
                        placeholder="请选择物料属性"
                        style="width: 300px"
                      >
                        <el-option
                          v-for="item in materialPropData"
                          :key="item"
                          :label="item"
                          :value="item"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="物料分类" prop="materialCategory">
                      <el-select
                        v-model="editForm.materialCategory"
                        placeholder="请选择物料分类"
                        style="width: 300px"
                      >
                        <el-option
                          v-for="item in materialCategoryData"
                          :key="item"
                          :label="item"
                          :value="item"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="状态" prop="status">
                      <el-radio v-model="editForm.status" value="启用"
                        >启用</el-radio
                      >
                      <el-radio v-model="editForm.status" value="禁用"
                        >禁用</el-radio
                      >
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="库存数量" prop="num">
                      <el-input-number
                        placeholder="请输入"
                        style="width: 300px"
                        v-model.number="editForm.num"
                      ></el-input-number>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
          </div>
        </el-card>
      </div>
    </div>
    <div class="footer" :class="{ 'footer-visible': isFooterVisible }">
      <div class="footerButton">
        <el-button type="primary" plain style="width: 80px" @click="close"
          >关闭</el-button
        >
        <el-button type="primary" style="width: 80px" @click="confirmUpdate"
          >确定</el-button
        >
      </div>
    </div>
  </div>
</template>
          
    <script setup lang="ts">
import { useRouter } from "vue-router";
import { ref, onMounted } from "vue";
import { ElMessage } from "element-plus";
import dayjs from "dayjs";
import { MaterialAddData } from "@/api/Material/params";
import {
  postMaterialAddApi,
  getMaterialDetailApi,
  putMaterialUpdateApi,
} from "@/api/Material";
import { MaterialResData } from "@/api/Material/res";
import { useRoute } from "vue-router";

const $router = useRouter();
const $route = useRoute();
const editFormRef = ref(null);
const unitData = ["个", "箱", "台", "件", "套"];
const materialTypeData = ["生产物料", "半成品", "其他"];
const materialPropData = ["自制", "委外", "采购", "其他"];
const materialCategoryData = ["分类一", "分类二", "分类三"];
const rules = {
  materialId: [{ required: true, message: "请输入物料编号", trigger: "blur" }],
  materialName: [
    { required: true, message: "请输入物料名称", trigger: "blur" },
  ],
  type: [{ required: true, message: "请输入规格型号", trigger: "blur" }],
  unit: [{ required: true, message: "请选择单位", trigger: "blur" }],
  materialType: [
    { required: true, message: "请选择物料类型", trigger: "blur" },
  ],
  materialProp: [
    { required: true, message: "请选择物料属性", trigger: "blur" },
  ],
  materialCategory: [
    { required: true, message: "请选择物料分类", trigger: "blur" },
  ],
  status: [{ required: true, message: "请选择状态", trigger: "blur" }],
  num: [{ required: true, message: "请输入库存数量", trigger: "blur" }],
};
let editForm = ref<MaterialResData>({
  materialId: "",
  materialName: "",
  type: "",
  unit: "",
  materialType: "",
  materialProp: "",
  materialCategory: "",
  status: "",
  num: "",
});
const isFooterVisible = ref(false);

onMounted(async () => {
  setTimeout(() => {
    isFooterVisible.value = true;
  }, 100);
  try {
    const res: MaterialResData = await getMaterialDetailApi(
      $route.query.objectId as string
    );
    editForm.value = res;
  } catch (err: any) {
    ElMessage({ type: "error", message: err.message });
  }
});

const close = () => {
  $router.replace("/material/setting");
};
const confirmUpdate = () => {
  editFormRef.value.validate(async (valid) => {
    if (valid) {
      try {
        const updateData = Object.keys(editForm.value).reduce((obj, key) => {
          if (key !== "createdAt") {
            obj[key] = editForm.value[key];
          }
          return obj;
        }, {} as MaterialAddData);
        updateData.num = String(updateData.num);
        const res: any = await putMaterialUpdateApi(updateData);
        ElMessage({ type: "success", message: "编辑成功" });
        close();
      } catch (err: any) {
        ElMessage({ type: "error", message: err.message });
      }
    } else {
      ElMessage({ type: "error", message: "请先填写必要字段" });
    }
  });
};
</script>
          <style scoped lang="scss">
.addContainer {
  width: 100%;
  position: relative;
  height: 100%;
  transform: translate(0);
  .addBody {
    width: 100%;
    .basicInfoContainer,
    .bomInfoContainer {
      padding: 20px;
      .milestone {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 1.5px;
        background-color: #dfe2e7;
        .milestone-content {
          border: 1.5px solid #dfe2e7;
          padding: 10px;
          padding-left: 20px;
          padding-right: 20px;
          font-weight: bold;
          font-size: 15px;
          border-radius: 10px;
          z-index: 999;
          background-color: #fff;
          color: #1b9aee;
        }
      }
    }
    .bomInfoContainer {
      margin-top: 20px;
    }
  }
  .footer {
    z-index: 999;
    width: 100%;
    height: 70px;
    background-color: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    padding: 10px;
    display: flex;
    justify-content: center;
    box-shadow: 0 -8px 10px rgba(92, 92, 92, 0.1);
    transform: translateY(100%); // 初始状态在视口下方
    transition: transform 0.5s ease-out; // 添加过渡效果

    &.footer-visible {
      transform: translateY(0); // 显示时回到原位
    }
  }
}
</style>